<template>
    <div class="recommended-notice">
        <el-collapse-transition>
            <div 
            v-if="showASearch"
            class="notice-nav"
            >
                <select-module 
                    ref="province" 
                    label="选择省级：" 
                    :options="provinces" 
                    :keyName="`valueid`" 
                    :contentName="`valuename`" 
                    :def-active="$store.getters['city/usersProvince'].valuename" 
                    single
                    v-model="provinceIds"
                    @click="provinceClickHandler"
                ></select-module>

                <select-module 
                    ref="city" 
                    label="选择城市：" 
                    :options="cityListByProvinceSel || cities" 
                    :keyName="`valueid`" 
                    :contentName="`valuename`" 
                    :def-active="$store.state.city.usersCityName" 
                    v-model="cityIds"
                    @click="cityAfterQuery"
                ></select-module>

                <select-module 
                    ref="classify" 
                    label="选择分类：" 
                    :options="classifyList" 
                    :keyName="`valueid`" 
                    :contentName="`valuename`" 
                    v-model="classifyIds"
                    @click="classAfterQuery"
                ></select-module>

                <select-module 
                    ref="major" 
                    label="选择行业：" 
                    :options="majorList" 
                    :keyName="`valueid`" 
                    :contentName="`valuename`" 
                    v-model="majorIds"
                    @click="majorAfterQuery"
                ></select-module>

                <select-module 
                    ref="notice" 
                    label="公告类型：" 
                    :options="noticeList" 
                    :keyName="`name`" 
                    :contentName="`name`" 
                    v-model="noticeNames"
                    @click="noticeAfterQuery"
                ></select-module>

            </div>
        </el-collapse-transition>

        <el-divider class="divider-line"></el-divider>

        <div class="notice-content">
            <skeleton 
            :loading="loadingController" 
            >
                <template v-if="tableData && tableData.length > 0">
                    <div 
                    class="items" 
                    v-for="(item , ind) in tableData" 
                    :key="ind"
                    v-czc="['首页', '点击列表', '公告列表', ind , 'home-list-noticeList']"
                    >
                        <content-item 
                        :data="item" 
                        :title="`${ind+1}.${item.notice}`" 
                        :rowguid="item.notice" 
                        @titleClick="titleClick" 
                        >
                            <span slot="time">{{item.publishtime}}</span>
                            <template slot="content">
                                <div style="margin-top:16px;">
                                    <my-tag v-show="!!item.area">{{item.area}}</my-tag>
                                    <my-tag v-show="!!item.noticetype">{{item.noticetype}}</my-tag>
                                    <my-tag v-show="!!item.industry && item.industry != '未知'">{{item.industry}}</my-tag>
                                    <my-tag v-show="!!item.price && item.noticetype=='中标公告'" :is-default="false">{{item.price +'元'}}</my-tag>
                                </div>
                            </template>
                        </content-item>
                    </div>
                </template>

                <empty-list v-if="!tableData.length">
                    <span>暂无数据</span>
                </empty-list>
            </skeleton>
        </div>

        <my-pagination 
            class="pagination" 
            ref="page" 
            v-model="tableData" 
            :action="`${$store.state.api.tbUrl}/searchrelated/noticelist.json`" 
            :search="pgData"
            :auto-show="false"
            :afterQuery="noticeListAfterQuery"
            :loading.sync="loadingController"
        ></my-pagination>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import notice from '@/mixins/notice.js';

import Skeleton from '../../../components/skeleton.vue';
import selectModule from '../../../components/select-module.vue';
import selectMultipletModule from '../../../components/select-multiple-module.vue';
import contentItem from '../../../components/item.vue';
import EmptyList from '@components/sys/empty-list';

export default {
    mixins: [notice],
    props: {
        searchStr: {
            type: String,
            default: '',
        },
        showASearch: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Skeleton,
        selectModule,
        selectMultipletModule,
        contentItem,
        EmptyList,
    },
    data() {
        return {
            loadingController: true,

            tableData: [],
            cityListByProvinceSel: null,
            
            cityIds: [],
            transferCityIds: [],    // cityIds 与 pgData.area 中转
            provinceIds:[],

            noticeList: [],
            noticeNames: [],

            majorList: [],
            majorIds: [],

            classifyList: [],
            classifyIds: [],
        };
    },
    computed: {
        ...mapGetters({
            provinces: 'city/getProvinces',
            cities: "city/getCities",
        }),
        pgData: function () {
            return {
                sortname: 'publishtime',
                pagesize: 10,
                title: this.searchStr,
                // area: this.cityIds.toString(),
                area: this.transferCityIds.toString(),
                classify: this.classifyIds.toString(),
                industry: this.majorIds.toString(),
                type: this.noticeNames.toString(),
            };
        },
    },
    watch: {
        'pgData.area': function (n, o) {
            this.deSearch();
        },
        'pgData.classify': function (n, o) {
            this.deSearch();
        },
        'pgData.industry': function (n, o) {
            this.deSearch();
        },
        'pgData.type': function (n, o) {
            this.deSearch();
        },
        'cityIds':{
            handler(n,o){
                if(n && n.length !==0){
                    this.transferCityIds = n;
                } else {
                    this.transferCityIds = this.provinceIds;
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
            queryWeather: 'city/queryWeather',
        }),
        int() {
            this.getNoticeData();
            this.getClassifyList();
            this.getMajorList();
        },
        getNoticeData() {
            this.noticeList = [
                {
                    id: 1,
                    name: '招标计划公告',
                },
                {
                    id: 2,
                    name: '政府采购意向',
                },
                {
                    id: 3,
                    name: '政府采购意向变更',
                },
                {
                    id: 4,
                    name: '招标公告',
                },
                {
                    id: 5,
                    name: '变更公告',
                },
                {
                    id: 6,
                    name: '中标候选人公示',
                },
                {
                    id: 7,
                    name: '中标公告',
                },
            ];
        },
        getMajorList() {
            this.$get(`${this.$store.state.api.tbUrl}/searchrelated/getindustries.json`, {}, (data, res) => {
                this.majorList = data;
            });
        },

        getClassifyList: function () {
            this.$get(`${this.$store.state.api.tbUrl}/searchrelated/getclassify.json`, {}, function (data) {
                this.classifyList = data;
            });
        },

        //跳转页面
        titleClick(data) {
            this.openNotice(data.guid, data.noticetype , true);
        },
        deSearch() {
            this.$nextTick(() => {
                this.$refs.page.queryData();
            });
        },
        reload() {
            this.$refs.page.reload();
        },

        //重置
        reset() {
            this.$refs.city.reset();
            this.$refs.classify.reset();
            this.$refs.major.reset();
            this.$refs.notice.reset();
        },

        provinceClickHandler(item) {
            var {valueid} = item;
            this.$nextTick(()=>{
                this.cityIds = [valueid];
            })
            this.cityListByProvinceSel = this.$store.getters['city/getCitiesByProvinceCode'](valueid);
        },

        //埋点
        cityAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容选择城市', index ,'home-select-city'])
        },
        classAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容选择分类', index ,'home-select-class'])
        },
        majorAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容选择行业', index ,'home-select-major'])
        },
        noticeAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容公告类型', index ,'home-select-noticeType'])
        },
        noticeListAfterQuery(rows , data) {
            this.setCzc(['首页', '翻页' , '查公告', this.$refs.page.currentPage ,'home-page-noticeLookup'])
        },
    },
    mounted() {
        this.int();

        this.queryWeather();
        this.queryCity();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.recommended-notice {
    .divider-line{
        margin-top: 12px;
        margin-bottom: 18px;
    }

    .notice-content {
        .items {
            & + .items{
                margin-top: 22px;
            }
        }
    }
    .pagination {
        margin-top: 20px;
    }
}
</style>